<script setup>
import { reactive,ref} from "vue";
import router from "@/router";
import {getRegister} from "../api/index";

// 初始的ref
const ref_form=ref(null)
// 表单数据声明
const userInfo = reactive({
  username: '',
  password: ''
})
// 表单数据效验规则
const rules={
  username:[{required:'true',trigger:'blur',message:'用户名不能为空'}],
  password:[{required:'true',trigger:'blur',message:'密码不能为空'}]
}
// 注册方法
const onRegister=()=>{
  ref_form.value.validate((val)=>{
    if(val){
      getRegisterData()
    }else{
      console.log('注册失败')
    }
  })
}
// 注册接口
const getRegisterData = async () => {
  //TODO: 调用注册的接口;
  const res = await getRegister({
    name: userInfo.username,
    pwd: userInfo.password,
  });
  if (res?.message) {  // 如果注册成功
    ElMessage({
      message: res.message,
      type: 'success',
    });
   router.push('/login');
  }
};
const toGo=()=>{
  router.push('/login')
}
</script>

<template>
  <div class="Register">
    <!--  背景图片-->
    <div class="Register_img1"><img src="../assets/背景1.png"></div>
    <div class="Register_container">
      <h1>小吴课程管理系统</h1>
      <el-form class="Register_form" :model="userInfo" :rules="rules" @keyup.enter="onRegister" ref="ref_form">
        <el-form-item prop="username">
          <!--用户名-->
          <el-input style="width: 240px" placeholder="请输入用户名" v-model.trim="userInfo.username">
            <template #prepend><el-icon><User /></el-icon></template>
          </el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input
              style="width: 240px"
              placeholder="请输入密码"
              show-password
              v-model.trim="userInfo.password"
          >
            <template #prepend><el-icon><Lollipop /></el-icon></template>
          </el-input>
        </el-form-item>
        <!--        注册-->
        <el-button class="Register_submit"  type="primary" @click="onRegister">注册</el-button>
        <div class="Register_register" @click="toGo">已有账号去登录</div>
      </el-form>
    </div>
  </div>

</template>

<style lang="less" scoped>
.Register {
  width: auto;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.Register_img1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; // 图片置于内容下方
}

.Register_container {
  width: 350px;
  height: 260px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  box-shadow: 5px 6px 50px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  border-radius: 8px;
  align-items: center;
  text-align: center;
}
.Register_container h1{
  margin: -10px 0px 20px 0px;
}
.Register_submit{
  width: 100px;
  font-size: 18px;
  margin-bottom: 10px;
}
.Register_register{
  color: #409eff;
  cursor: pointer;
}
</style>